<template>
	<satri-page :padding="20">
		<!-- 裁剪模式示例 -->
		<satri-card label="裁剪模式">
			<satri-row :gutter="20">
				<!-- scaleToFill 模式 -->
				<satri-col :span="6">
					<satri-image src="/pages/demo/static/bg1.png" :size="140" mode="scaleToFill" />
					<satri-text value="scaleToFill"></satri-text>
				</satri-col>

				<!-- aspectFit 模式 -->
				<satri-col :span="6">
					<satri-image src="/pages/demo/static/bg1.png" :size="140" mode="aspectFit" />
					<satri-text value="aspectFit"></satri-text>
				</satri-col>

				<!-- aspectFill 模式 -->
				<satri-col :span="6">
					<satri-image src="/pages/demo/static/bg1.png" :size="140" mode="aspectFill" />
					<satri-text value="aspectFill"></satri-text>
				</satri-col>

				<!-- widthFix 模式 -->
				<satri-col :span="6">
					<satri-image src="/pages/demo/static/bg1.png" :size="140" mode="widthFix" />
					<satri-text value="widthFix"></satri-text>
				</satri-col>
			</satri-row>
		</satri-card>

		<!-- 圆角示例 -->
		<satri-card label="圆角">
			<satri-row type="flex">
				<!-- 圆形图片 -->
				<satri-col :span="6">
					<satri-image src="/pages/demo/static/avatar1.png" :size="140" round />
				</satri-col>

				<!-- 自定义圆角半径 -->
				<satri-col :span="6">
					<satri-image src="/pages/demo/static/avatar1.png" :size="140" :radius="16" />
				</satri-col>
			</satri-row>
		</satri-card>

		<!-- 自定义大小示例 -->
		<satri-card label="自定义大小">
			<satri-row type="flex">
				<satri-image src="/pages/demo/static/avatar1.png" :size="[150, 280]" mode="aspectFill" />
			</satri-row>
		</satri-card>

		<!-- 点击预览示例 -->
		<satri-card label="点击预览">
			<satri-row type="flex">
				<satri-image src="/pages/demo/static/bg1.png" :size="140" :preview-list="previewList" />
			</satri-row>
		</satri-card>

		<!-- 插槽：地址为空 -->
		<satri-card label="插槽：地址为空">
			<satri-row type="flex">
				<!-- 默认图片 -->
				<satri-image src="" :size="150" />

				<!-- 自定义占位符 -->
				<satri-image src="" :size="150" :margin="[0, 0, 0, 20]">
					<template #placeholder>
						<satri-text color="red" value="自定义"></satri-text>
					</template>
				</satri-image>
			</satri-row>
		</satri-card>

		<!-- 插槽：加载错误 -->
		<satri-card label="插槽：加载错误">
			<satri-image src="https://xxxx.png" :size="150" />
		</satri-card>
	</satri-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import Bg from "/pages/demo/static/bg1.png";
	import Avatar from "/pages/demo/static/avatar1.png";

	// 预览列表，用于点击预览功能
	const previewList = ref([Bg, Avatar]);
</script>